* {
  box-sizing: border-box;
  text-align: left;
  --碎梦: #c2edf6;
  --龙吟: #9cdad9;
  --素问: #de9090;
  --九灵: #ac8ad4;
  --神相: #a1bede;
  --玄机: #d7c79f;
  --铁衣: #cf8e64;
  --血河: #bb6856;
  --鸿音: #d8b64b;
  --荒羽: #c7b6d8;
  --潮光: #e8fafe;
  --沧澜: #5c86b3;
  --云瑶: #e94f5d;

  --人数: #d6007b;
  --击败: linear-gradient(to top, #87afff, #5d92ff 60%, #87afff); // #275bc5;
  --助攻: linear-gradient(to top, #68e1be, #21cb9a 60%, #68e1be); // #158565;
  --资源: linear-gradient(to top, #ffcc88, #f9b254 60%, #ffcc88); // #ffc149;
  --人伤: linear-gradient(to top, #ffaeae, #ff5454 60%, #ffaeae); // #dd2828;
  --塔伤: linear-gradient(to top, #ffb692, #ff8a50 60%, #ffb692); // #c34e14;
  --治疗值: linear-gradient(to top, #ffadd3, #f56dac 60%, #ffadd3); // #b42567;
  --承伤: linear-gradient(to top, #f393ff, #dc46ef 60%, #f393ff); // #8b1d99;
  --重伤: linear-gradient(to top, #6ed8f3, #1bb9e1 60%, #6ed8f3); // #0c7e9b;
  --青灯焚骨: linear-gradient(to top, #c9acff, #a170f9 60%, #c9acff); // #6c39c6;
  --战复: linear-gradient(to top, #77e7a1, #2acf69 60%, #77e7a1); // #1a9248;
  --控制: linear-gradient(to top, #ffcf8f, #fda93a 60%, #ffcf8f); // #e18307;
  --总伤: linear-gradient(to top, #ffa6bb, #ef6283 60%, #ffa6bb); // #ba1f43;
  --KDA: #63c384;
  --转换系数: #69c589;
  --伤害效率: #ff555a;
  --参团率: #6992c8;

  --bg-white: #fff;
  --text-black: #333;
  --cell-border: #d9d9d9;
  --box-shadow-inset: 0 0 80px 100px var(--bg-white) inset;
}

html.dark * {
  --碎梦: #198cb5;
  --龙吟: #3a8f6e;
  --素问: #de9090;
  --九灵: #831f8a;
  --神相: #324984;
  --玄机: #938d5e;
  --铁衣: #a95a0f;
  --血河: #892933;
  --鸿音: #ad8d3c;
  --荒羽: #7e77a2;
  --潮光: #6a9fc1;
  --沧澜: #18274b;
  --云瑶: #ce4651;

  --人数: #d6007b;
  --击败: linear-gradient(to top, #336bcb, #275bc5 60%, #336bcb); // #275bc5;
  --助攻: linear-gradient(to top, #15b982, #158565 60%, #15b982); // #158565;
  --资源: linear-gradient(to top, #f49d0b, #e18307 60%, #f49d0b); // #ffc149;
  --人伤: linear-gradient(to top, #ed4141, #dd2828 60%, #ed4141); // #dd2828;
  --塔伤: linear-gradient(to top, #ee7019, #c34e14 60%, #ee7019); // #c34e14;
  --治疗值: linear-gradient(to top, #bb407e, #b42567 60%, #bb407e); // #b42567;
  --承伤: linear-gradient(to top, #b828c9, #8b1d99 60%, #b828c9); // #8b1d99;
  --重伤: linear-gradient(to top, #0a93ad, #0c7e9b 60%, #0a93ad); // #0c7e9b;
  --青灯焚骨: linear-gradient(to top, #7854ce, #6c39c6 60%, #7854ce); // #6c39c6;
  --战复: linear-gradient(to top, #229c50, #1a9248 60%, #229c50); // #1a9248;
  --控制: linear-gradient(to top, #f49d0b, #e18307 60%, #f49d0b); // #e18307;
  --总伤: linear-gradient(to top, #c83953, #ba1f43 60%, #c83953); // #ba1f43;
  --KDA: #63c384;
  --转换系数: #69c589;
  --伤害效率: #ff555a;
  --参团率: #6992c8;

  --bg-white: #141414;
  --text-black: #fff;
  --cell-border: #363638;
}

.wrapper {
  height: 100%;
  width: 100%;
}

$paddingList: 0 5 8 10 15 20;
@each $var in $paddingList {
  @if ($var == 0) {
    .no-padding {
      padding: 0 !important;
    }
    .no-margin {
      margin: 0 !important;
    }
  } @else {
    .p-#{$var} {
      padding: #{$var}px;
    }
    .pl-#{$var} {
      padding-left: #{$var}px;
    }
    .pr-#{$var} {
      padding-right: #{$var}px;
    }
    .pt-#{$var} {
      padding-top: #{$var}px;
    }
    .pb-#{$var} {
      padding-bottom: #{$var}px;
    }
    .plr-#{$var} {
      padding-left: #{$var}px;
      padding-right: #{$var}px;
    }
    .ptb-#{$var} {
      padding-top: #{$var}px;
      padding-bottom: #{$var}px;
    }

    .m-#{$var} {
      margin: #{$var}px !important;
    }
    .ml-#{$var} {
      margin-left: #{$var}px !important;
    }
    .mr-#{$var} {
      margin-right: #{$var}px !important;
    }
    .mt-#{$var} {
      margin-top: #{$var}px !important;
    }
    .mb-#{$var} {
      margin-bottom: #{$var}px !important;
    }
    .mlr-#{$var} {
      margin-left: #{$var}px !important;
      margin-right: #{$var}px !important;
    }
    .mtb-#{$var} {
      margin-top: #{$var}px !important;
      margin-bottom: #{$var}px !important;
    }
  }
}

.fh {
  height: 100%;
}
.fw {
  width: 100%;
}

.el-table {
  .el-table__cell {
    padding: 4px !important;
    border: none !important;
  }
  th.el-table__cell {
    background-color: var(--bg-white) !important;
    color: var(--text-black) !important;
  }
  td.el-table__cell .cell {
    text-align: inherit;
  }
  .cell {
    line-height: 22px !important;
    // padding: 0 !important;
  }
}

$occupation: "碎梦" "龙吟" "素问" "九灵" "神相" "玄机" "铁衣" "血河" "鸿音" "荒羽" "潮光" "沧澜" "云瑶";
.el-table td.el-table__cell {
  &.职业::after {
    content: "";
    position: absolute;
    top: -8px;
    right: 0;
    width: 42px;
    height: 47px;
    background: url("@/assets/image/sprite-06eca0_06eca0f8.webp");
    transform: scale(0.6);
  }

  @each $item in $occupation {
    &.#{$item}.玩家,
    &.#{$item}.职业 {
      color: var(--text-black);
      background-color: var(--#{$item}) !important;
    }
  }

  &.碎梦.职业::after {
    background-size: 1057px 1003px;
    background-position: -634px -789px;
  }
  &.龙吟.职业::after {
    background-size: 1057px 1003px;
    background-position: -594px -512px;
  }
  &.素问.职业::after {
    background-size: 1057px 1003px;
    background-position: -1014px -836px;
  }
  &.九灵.职业::after {
    background-size: 1057px 1003px;
    background-position: -638px -512px;
  }
  &.神相.职业::after {
    background-size: 1057px 1003px;
    background-position: -150px -789px;
  }
  &.玄机.职业::after {
    background-size: 1057px 1003px;
    background-position: -1014px -786px;
  }
  &.铁衣.职业::after {
    background-size: 1057px 1003px;
    background-position: -1014px -433px;
  }
  &.血河.职业::after {
    background-size: 1057px 1003px;
    background-position: -860px -670px;
  }
  &.鸿音.职业::after {
    background-size: 1057px 1003px;
    background-position: -1014px -382px;
  }
  &.荒羽.职业::after {
    background-size: 1057px 1003px;
    background-position: -1014px -736px;
  }
  &.潮光.职业::after {
    background-size: 1057px 1003px;
    background-position: -1014px -686px;
  }
  &.沧澜.职业::after {
    background-size: 1057px 1003px;
    background-position: -1014px -636px;
  }
  &.云瑶.职业::after {
    background-size: 1057px 1003px;
    background-position: -1014px -586px;
  }

  .brush {
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-right: 10px solid transparent;
      border-top: 10px solid #dd1c1c;
    }
  }
}

.kv-image {
  position: absolute;
  z-index: -1;
  top: 0;
  background-repeat: no-repeat;
  background-position: right;

  &.沧澜 {
    width: 100vw;
    height: 100vh;
    background-image: url("@/assets/image/canglan-kv.png");
  }
  &.潮光 {
    width: 100vw;
    height: 100vh;
    background-image: url("@/assets/image/chaoguang-kv.png");
  }
  &.荒羽 {
    width: 100vw;
    height: 100vh;
    background-image: url("@/assets/image/huangyu-kv.png");
  }
  &.鸿音 {
    width: 100vw;
    height: 100vh;
    background-image: url("@/assets/image/hongyin-kv.png");
  }
}
.kv-image {
  background-size: contain;
  width: 1170px;
  height: 548px;
  right: 30px;
  box-shadow: var(--box-shadow-inset);
  &.九灵 {
    background-image: url("@/assets/image/jiuling-kv.png");
  }
  &.龙吟 {
    background-image: url("@/assets/image/longyin-kv.png");
  }
  &.神相 {
    background-image: url("@/assets/image/shenxiang-kv.png");
  }
  &.碎梦 {
    background-image: url("@/assets/image/suimeng-kv.png");
  }
  &.素问 {
    background-image: url("@/assets/image/suwen-kv.png");
  }
  &.铁衣 {
    background-image: url("@/assets/image/tieyi-kv.png");
  }
  &.玄机 {
    background-image: url("@/assets/image/xuanji-kv.png");
  }
  &.血河 {
    background-image: url("@/assets/image/xuehe-kv.png");
  }
  &.云瑶 {
    background-image: url("@/assets/image/yunyao-kv.png");
    width: 794px;
    height: 490px;
  }
}

$rowName: "人数" "击败" "助攻" "资源" "人伤" "塔伤" "治疗值" "承伤" "重伤" "青灯焚骨" "战复" "控制" "总伤" "KDA" "转换系数" "伤害效率" "参团率";
.percent-table.el-table td.el-table__cell {
  @each $item in $rowName {
    &.#{$item} {
      color: var(--text-black);
      --background: var(--#{$item});
    }
  }
}
.el-table td.el-table__cell {
  .number {
    z-index: 1;
    position: relative;
    text-align: inherit;
    // padding: 0 12px;
  }
  .percent {
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100% - 6px);
    margin: 3px;
    border: 1px solid var(--cell-border);
    border-radius: 2px;
    width: calc(100% - 6px);
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: calc(var(--value) / var(--max) * 100%);
      background: var(--background);
      // min-width: 2px;
    }
    // background: #031e6b;
    // opacity: 0.2;
  }
}

.el-table .cell {
  background: inherit;
}
.el-table__body {
  overflow: hidden;
}